<script setup lang="ts">
import DragItem from "./components/drag-item.vue";
import { Dragline } from "./dragline/dragline";

// const dragline = new Dragline({
//   activeClassName: "active-item",
// });
// const dragline = new Dragline({
//   preventDrag: true,
// });
const dragline = new Dragline();

const containerEl = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (containerEl.value) {
    dragline.registerDragContainer(containerEl.value);
  }
});
onUnmounted(() => {
  dragline.destoryAll();
});
</script>

<template>
  <div class="drag-container">
    <DragItem :content="'box1'" :handler="false" :dragline="dragline" />
    <DragItem :content="'box2'" :handler="false" :dragline="dragline" />
    <DragItem :content="'box3'" :handler="true" :dragline="dragline" />
    <DragItem :content="'box4'" :handler="true" :dragline="dragline" />
    <DragItem :content="'box5'" :handler="false" :dragline="dragline" />
  </div>
</template>

<style scoped>
.drag-container {
  position: relative;
  width: 600px;
  height: 600px;
  border: 1px solid red;
}
</style>
